<template>
  <div class="my">
    <!-- 登录入驻 -->
    <div
      class="userinfo"
      v-if="settle_in != 0 && status > 0 && status !='undefined' && token != 0 && token != -1 && token != 'undefined'"
    >
      <div class="name">
        <img :src="userinfo.avatar" alt />
        <span>{{ userinfo.nickname }}</span>
      </div>
      <div class="info" @click="gostoreinfo">
        <span>商家资料</span>
        <img src="@/assets/my/jiantou2.png" alt />
      </div>
    </div>
    <!-- 登录未入驻 -->
    <div class="userinfo" v-if="settle_in == 0 && token != 0 && token != -1 && token != 'undefined' && state>0">
      <div class="name">
        <img :src="userinfo.avatar" alt />
        <span>{{ userinfo.nickname }}</span>
      </div>
      <div class="rzhbtn" @click="goruzhu">加盟商入驻</div>
    </div>
    <!-- 未登录 -->
    <div class="userinfo" v-if="token == -1 || token == 'undefined' || token == 0">
      <div class="name">
        <img src="@/assets/my/mrtouxiang.png" alt />
        <div @click="getCode">
          <div class="denglu">点击登录</div>
          <div class="p">登录同步数据，查看更多功能</div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <div class="p1">采购订单</div>
        <div class="p2" @click="goorder(0)">
          <span>查看全部订单</span>
          <img src="@/assets/my/jiantou1.png" alt />
        </div>
      </div>
      <div class="main_banner">
        <div class="li" @click="goorder(3)">
          <div class="icon icon1"></div>
          <span>待发货</span>
          <!-- <div class="dian"></div> -->
        </div>
        <div class="li" @click="goorder(4)">
          <div class="icon icon2"></div>
          <span>待收货</span>
        </div>
        <div class="li" @click="goorder(2)">
          <div class="icon icon3"></div>
          <span>待自提</span>
        </div>
        <div class="li" @click="goorder(5)">
          <div class="icon icon4"></div>
          <span>已完成</span>
        </div>
      </div>
      <div class="main_list">
        <div class="main_li" @click="mylower">
          <div class="li_left">
            <img src="@/assets/my/lowerlevel.png" alt />
            <span>我的下级</span>
          </div>
          <div class="li_right">
            <img src="../assets/my/jiantou2.png" alt />
          </div>
        </div>
        <div class="main_li" @click="lowerprofit">
          <div class="li_left">
            <img src="@/assets/my/profit.png" alt />
            <span>下级收益</span>
          </div>
          <div class="li_right">
            <img src="../assets/my/jiantou2.png" alt />
          </div>
        </div>
        <div class="main_li" @click="myaddress">
          <div class="li_left">
            <img src="@/assets/my/address.png" alt />
            <span>我的地址</span>
          </div>
          <div class="li_right">
            <span>去添加</span>
            <img src="../assets/my/jiantou2.png" alt />
          </div>
        </div>
      </div>
    </div>
    <MyNavbar></MyNavbar>
  </div>
</template>

<script>
import MyNavbar from "@/components/MyNavbar";
import axios from "axios";
export default {
  data() {
    return {
      isshow: 1,
      userinfo: {},
      token: 0,
      status: 0,
      settle_in: 0,
      state: 0,
      code: "",
    };
  },
  mounted() {
    this.code = this.getUrlCode().code;
    if (
      !window.localStorage.getItem("token") ||
      window.localStorage.getItem("token") == "undefined" ||
      window.localStorage.getItem("token") == -1
    ) {
      axios
        .post("index/index/index", this.$qs.stringify({
          code: this.code,
        }))
        .then((res) => {
          window.localStorage.setItem("token", res.data.data.token);
          window.localStorage.setItem("state", res.data.data.state);
          this.token = window.localStorage.getItem("token");
          this.state = window.localStorage.getItem("state");
          if (this.state == 0 && this.token!=-1&&this.token!="undefined") {
            this.$router.push("/bindingnumber");
          }
        });
    }

    this.token = window.localStorage.getItem("token");
    this.status = window.localStorage.getItem("status");
    this.settle_in = window.localStorage.getItem("settle_in");
    this.state = window.localStorage.getItem("state");

    if (!window.localStorage.getItem("token")) {
      this.$router.push("/home");
    } else if (this.state == 0 && this.token!=-1&&this.token!="undefined") {
      this.$router.push("/bindingnumber");
    } else {
      axios
        .post("/index/user/info", this.$qs.stringify({
          token: this.token,
        }))
        .then((res) => {
          console.log(res);
          if (res.data.code == -1) {
            window.localStorage.setItem("token", res.data.code);
            this.token = window.localStorage.getItem("token");
            // this.$router.push("/home");
          } else {
            window.localStorage.setItem("settle_in", res.data.data.user.store_id);
            this.userinfo = res.data.data.user;
            this.settle_in = res.data.data.user.store_id;
            this.status = res.data.data.user.status;
            window.localStorage.setItem("status", res.data.data.user.status);
            var store = res.data.data.user.store;
            if (Object.keys(store).length == 0) {
              this.isshow = 1;
            } else {
              this.isshow = 0;
            }
          }
        });
    }
  },
  components: {
    MyNavbar,
  },
  methods: {
    gopage() {
      this.$router.replace("/home");
    },
    // 去入驻
    goruzhu() {
      this.$router.push("/settlement");
    },
    // 商家资料
    gostoreinfo() {
      this.$router.push("/storeinfo");
    },
    // 我的下级
    mylower() {
      if (this.settle_in == 0) {
        this.$toast("商家未入驻，请先入驻");
        this.$router.push("/Settlement");
      } else {
        this.$router.push("/mylower");
      }
    },
    // 下级收益
    lowerprofit() {
      if (this.settle_in == 0) {
        this.$toast("商家未入驻，请先入驻");
        this.$router.push("/Settlement");
      } else {
        this.$router.push("/lowerprofit");
      }
    },
    // 我的地址
    myaddress() {
      if (this.settle_in == 0) {
        this.$toast("商家未入驻，请先入驻");
        this.$router.push("/Settlement");
      } else {
        this.$router.push("/myaddress");
      }
    },
    // 订单
    goorder(state) {
      if (this.settle_in == 0) {
        this.$toast("商家未入驻，请先入驻");
        this.$router.push("/Settlement");
      } else {
        this.$router.push({
          path: "/allorder",
          query: { state },
        });
      }
    },
    getCode() {
      // // 非静默授权，第一次有弹框
      // this.code = "";
      // this.code = this.getUrlCode().code; // 截取code
      // if (this.code == null || this.code === "") {
        console.log('tag', '1qweasd')
      axios.post("index/index/wxLogin").then((res) => {
        var http = res.data.data;
        console.log('http', res)
        window.localStorage.clear()
        window.location.href = http;
      });
      // } else {
      //   // 你自己的业务逻辑
      //   console.log(this.code, "code");
      //   axios
      //     .post("index/index/index", {
      //       code: this.code,
      //     })
      //     .then((res) => {
      //       window.localStorage.setItem("token", res.data.data.token);
      //       window.localStorage.setItem("state", res.data.data.state);
      //       this.token = window.localStorage.getItem("token");
      //       this.state = window.localStorage.getItem("state");
      //       if (this.state == 0) {
      //         this.$router.replace("/bindingnumber");
      //       }
      //     });
      // }
    },
    getUrlCode() {
      // 截取url中的code方法
      var url = location.search;
      this.winUrl = url;
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
      }
      return theRequest;
    },
  },
};
</script>

<style lang="scss" scoped>
.my {
  width: 100%;
  height: 100vh;
}
.userinfo {
  width: 345px;
  height: 105px;
  padding: 0 15px;
  display: flex;display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
  .name {
    display: flex;display: -webkit-flex;
    align-items: center;
    img {
      width: 54px;
      height: 54px;
      margin-right: 15px;
      border-radius: 50%;
    }
    span {
      font-size: 19px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #323232;
      line-height: 19px;
    }
    .denglu {
      font-size: 19px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #323232;
      line-height: 19px;
    }
    .p {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 13px;
      margin-top: 10px;
    }
  }
  .info {
    display: flex;display: -webkit-flex;
    align-items: center;
    span {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 13px;
      margin-right: 10px;
    }
    img {
      width: 7px;
      height: 12px;
    }
  }
  .rzhbtn {
    width: 90px;
    height: 34px;
    background: #ff511e;
    border-radius: 17px;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #fffefe;
    line-height: 34px;
    text-align: center;
  }
}
.main {
  width: 345px;
  padding: 0 15px;
  .main_top {
    width: 100%;
    height: 48px;
    background: url("../assets/my/bj.png") no-repeat center / 345px 48px;
    box-shadow: 0px 10px 15px 0px rgba(253, 212, 10, 0.3);
    border-radius: 10px 10px 0px 0px;
    display: flex;display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    .p1 {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      line-height: 15px;
      margin-left: 15px;
    }
    .p2 {
      height: 100%;
      line-height: 50px;
      span {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 13px;
      }
      img {
        width: 7px;
        height: 12px;
        margin: 0 10px;
      }
    }
  }
  .main_banner {
    width: 100%;
    height: 100px;
    display: flex;display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    .li {
      display: flex;display: -webkit-flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      .dian {
        width: 7px;
        height: 7px;
        background: #ff511e;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 0;
      }
      .icon {
        width: 45px;
        height: 45px;
        margin-bottom: 10px;
      }
      span {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #555555;
        line-height: 12px;
      }
      .icon1 {
        background: url("../assets/my/daifahuo.png") no-repeat center / 45px
          45px;
      }
      .icon2 {
        background: url("../assets/my/daishouhuo.png") no-repeat center / 45px
          45px;
      }
      .icon3 {
        background: url("../assets/my/daiziti.png") no-repeat center / 45px 45px;
      }
      .icon4 {
        background: url("../assets/my/yiwanch.png") no-repeat center / 45px 45px;
      }
    }
  }
  .main_list {
    width: 100%;
    .main_li {
      width: 100%;
      height: 52px;
      display: flex;display: -webkit-flex;
      justify-content: space-between;
      align-items: center;
      .li_left {
        display: flex;display: -webkit-flex;
        align-items: center;
        img {
          display: block;
          width: 16px;
          height: 16px;
        }
        span {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 14px;
          margin-left: 12px;
        }
      }
      .li_right {
        span {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #888888;
          line-height: 12px;
          margin-right: 10px;
        }
        img {
          width: 7px;
          height: 12px;
        }
      }
    }
  }
}
</style>